import React from 'react';
import style from './style.css'
import Cookie from 'js-cookie'


import Map from 'lodash.map'
import {uuid} from "../../../util/uitls";
import {Slider} from 'antd-mobile';

const List = [
    {image: "/static/Oval2Copy31.jpg", title: "Business"},
    {image: "/static/Oval2Copy33.jpg", title: "Design"},
    {image: "/static/user1.jpg", title: "Economy"},
    {image: "/static/Oval2Copy33.jpg", title: "Science"}
]

class Filter extends React.Component {
    constructor(props) {
        super()
        this.state = {
            active: "Design"
        }
    }

    componentDidMount() {
        var self = this
        var swiper = new Swiper(self.swiper, {
            slidesPerView: 'auto',
        });
    }

    render() {
        var self = this;
        return <div className={style.Filter}>
            <div className={style.h1}>
                Filter
            </div>

            <div>
                <div className={style.h2}>By Category</div>
                <div className={`${style['swiper-container']} swiper-container`} ref={node => this.swiper = node}>
                    <div className="swiper-wrapper">
                        {
                            Map(List, item => {
                                return <div
                                    className={`${style['swiper-slide']} swiper-slide ${item.title == self.state.active ? style.active : 'none'}`}
                                    onClick={() => {
                                        self.setState({active: item.title})
                                    }}
                                    key={uuid()}>
                                    <div>
                                        <div
                                            className={`${style.wraooerImage} ${item.title == self.state.active ? style.active : 'none'}`}>
                                            <img src={item.image} alt="" className={style.image}/>
                                        </div>
                                        <div
                                            className={`${style.title} ${item.title == self.state.active ? style.active : 'none'}`}>{item.title}</div>
                                    </div>
                                </div>
                            })
                        }
                        <div className={`${style['swiper-slide']} swiper-slide ${style['swiper-slide-laset']}`}
                             key={uuid()}>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <div className={style.h2}>By Cost Range</div>
                <div className={style.row2}>
                    <Slider
                        className={style.slider}
                        style={{marginLeft: 30, marginRight: 60}}
                        defaultValue={26}
                        min={0}
                        max={30}
                        handleStyle={{background: "#fff", border: "1px solid #fff"}}
                        trackStyle={{background: "#fff"}}
                        railStyle={{opacity: .4}}
                    />
                    <div className={style.ttip}>$50</div>
                </div>
            </div>
            <div className={style.btnWrapper}>
                Apply
            </div>

        </div>
    }
}

export default Filter